import React from "react";
import { Card, Row, Col, Table, message, Modal, Button } from "antd";

import Echarts from "echarts/lib/echarts";
// 按需加载 bar
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/markPoint";

import ReactEcharts from "echarts-for-react";

import Theme from "../../config/echartThemeConfig";
import "./index.less";
interface IProp {}
interface IState {}

class EChart extends React.Component<IProp, IState> {
	constructor(props: IProp, state: IState) {
		super(props, state);
		this.state = {};
	}

	// 主题颜色要在组件加载前注入
	componentWillMount() {
		Echarts.registerTheme("MyTheme", Theme);
	}

	render() {
		const option1 = {
			title: {
				text: "这是标题"
			},
			tooltip: {
				trigger: "axis",
				axisPointer: {
					// 坐标轴指示器，坐标轴触发有效
					type: "cross" // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			xAxis: [
				{
					type: "category",
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
					axisTick: {
						alignWithLabel: true
					}
				}
			],
			yAxis: [
				{
					type: "value"
				}
			],
			series: [
				{
					name: "直接访问",
					type: "bar",
					// barWidth: "60%",
					data: [10, 52, 200, 334, 390, 330, 220]
				}
			]
		};

		const option2 = {
			tooltip: {
				trigger: "axis",
				axisPointer: {
					type: "cross" // 默认为直线，可选为：'line' | 'shadow' | "cross"
				}
			},
			legend: {
				type: "scroll", // string  ,  'plain' | 'scroll'
				left: 110, // number | string  ,  0 | 'auto',
				width: 600,
				itemGap: 30,
				itemWidth: 25,
				itemHeight: 25,
				data: ["数据1", "数据2", "数据3", "数据4", "数据5", "数据6", "数据7"]
			},
			xAxis: [
				{
					type: "category",
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
					axisTick: {
						alignWithLabel: true
					}
				}
			],
			yAxis: {
				type: "value"
			},
			series: [
				{
					name: "数据1",
					type: "bar",
					data: [10, 52, 200, 334, 390, 330, 220]
				},
				{
					name: "数据2",
					type: "bar",
					data: [10, 52, 200, 334, 390, 330, 220]
				},
				{
					name: "数据3",
					type: "bar",
					data: [10, 52, 200, 334, 390, 330, 220]
				},
				{
					name: "数据4",
					type: "bar",
					data: [10, 52, 200, 334, 390, 330, 220]
				},
				{
					name: "数据5",
					type: "bar",
					data: [10, 52, 200, 334, 390, 330, 220]
				},
				{
					name: "数据6",
					type: "bar",
					data: [10, 52, 200, 334, 390, 330, 220]
				},
				{
					name: "数据7",
					type: "bar",
					data: [10, 52, 200, 334, 390, 330, 220]
				}
			]
		};

		return (
			<div>
				<Card title="柱形图1" className="button-wrap">
					<Row>
						<Col span={24}>
							<ReactEcharts option={option1} theme="MyTheme" style={{ height: "500px" }}></ReactEcharts>
						</Col>
					</Row>
				</Card>
				<Card title="柱形图2" className="button-wrap">
					<Row>
						<Col span={24}>
							<ReactEcharts option={option2} theme="MyTheme" style={{ height: "500px" }}></ReactEcharts>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default EChart;
